<template>
    <div class="app-container">
        <div class="todolist">
            <div class="todo-title">分享商品统计概况</div>
            <div class="todolist-content">
                <el-row>
                    <el-col :span="8">
                        <div class="tip-num">{{info.todayCount||0}}</div>
                        <div class="tip-title">今日成功分享商品次数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.weekCount||0}}</div>
                        <div class="tip-title">本周累计成功分享商品次数</div>
                    </el-col>
                    <el-col :span="8">
                        <div class="tip-num">{{info.monthCount||0}}</div>
                        <div class="tip-title">本月累计成功分享商品次数</div>
                    </el-col>
                </el-row>

            </div>
        </div>
        <div class="todolist">
            <div class="todo-title">分享商品累计统计</div>
            <div class="flex">
                <div class="flex-con">
                    <el-select v-model="selectedDays" @change="handleChangeSelectedDays">
                        <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.title"
                            :value="item.value"
                        ></el-option>
                    </el-select>
                    <div>
                        <div class="c-static">
                            <div class="flex">
                                <div class="flex-con">
                                    <div class="tip-num">{{info.shareCount||0}}</div>
                                    <div class="tip-title">累计分享商品次数</div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="btn-area" v-perm="'recommend_share:static-recommend-export'">
                    <el-button
                        type="primary"
                        size="mini"
                        @click="handleExportDetails"
                    >导出明细</el-button>
                    <div class="static-tip-txt">(备注:明细中为每一天对应的统计)</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import * as moment from 'moment'
export default {
  data () {
    return {
      info: {
        todayCount: 0,
        weekCount: 0,
        monthCount: 0,
        shareCount: 0
      },
      downloadLoading: false,
      selectedDays: 30,
      options: [
        {
          title: '最近7天',
          value: 7
        },
        {
          title: '最近30天',
          value: 30
        },
        {
          title: '最近60天',
          value: 60
        },
        {
          title: '最近90天',
          value: 90
        }
      ]
    }
  },
  created () {
    const momentNow = moment()
    const todayDates = [momentNow.format('YYYY-MM-DD 00:00:00'), momentNow.format('YYYY-MM-DD 23:59:59')]
    const day = new Date().getDay()
    const weekDates = [momentNow.subtract(day > 0 ? day - 1 : 6, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
    const monthDates = [moment().format('YYYY-MM-01 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
    this.queryShareSuccessCount(...todayDates).then(data => {
      this.todayCount = data
    })
    this.queryShareSuccessCount(...weekDates).then(data => {
      this.weekCount = data
    })
    this.queryShareSuccessCount(...monthDates).then(data => {
      this.monthCount = data
    })
    this.handleChangeSelectedDays()
  },
  methods: {
    handleExportDetails () {
      this.downloadLoading = true
      const dates = [moment().subtract(this.selectedDays, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      this.$post('/admin/share_activity_user_log/goods-share-daily-count', {
        startTime: dates[0], endTime: dates[1]
      }).then(rows => {
          import('@/vendor/Export2Excel').then(excel => {
            const tHeader = ['日期', '分享商品次数']
            const filterVal = ['shareDate', 'shareCount']
            const data = this.formatJson(filterVal, rows || [])
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: '分享商品次数统计'
            })
            this.downloadLoading = false
          })
      })
    },
    formatJson (filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          return v[j]
        })
      )
    },
    handleChangeSelectedDays () {
      const dates = [moment().subtract(this.selectedDays, 'days').format('YYYY-MM-DD 00:00:00'), moment().format('YYYY-MM-DD 23:59:59')]
      this.queryShareCount(...dates).then(data => {
        this.shareCount = data
      })
    },
    queryShareSuccessCount (startTime, endTime) {
      return this.$post('/admin/share_activity_user_log/goods-success-share-count', {
        startTime, endTime
      })
    },
    queryShareCount (startTime, endTime) {
      return this.$post('/admin/share_activity_user_log/goods-share-count', {
        startTime, endTime
      })
    }
  }
}
</script>
<style lang="scss">
.todolist {
  padding: 20px 0 10px 0;
}
.todolist-content {
  text-align: center;
}
.todolist .el-row {
  padding-bottom: 15px;
}

.todo-title {
  padding-bottom: 30px;
  font-size: 18px;
  font-weight: bold;
}
.btn-area {
  padding-right: 100px;
}
.static-tip-txt {
  padding-top: 20px;
}
.c-static {
  display: inline-block;
  padding-top: 10px;
}
.tip-num {
  text-align: center;
  padding-bottom: 15px;
  padding-top: 15px;
  font-size: 18px;
}
.tip-title,
.static-tip-txt {
  white-space: nowrap;
  font-size: 14px;
}
.static-tip-txt {
  color: #999;
}
</style>
